<!-- emeet产品数据列表 -->
<template>
    <div class="container">
        <!-- 查询显示区域 -->
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="webcam" class="tab-panel">
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="speaker phone" force-render>
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="microphone">
                <div class="card-panel white-pannel">
                     TODO: 数据类别查询参数
                </div>
            </a-tab-pane>
        </a-tabs>

        <!-- 内容显示区域：表格数据显示方式，数据导出等 -->
        <a-row class="condition-pannel white-pannel">
            <a-col :span="6">
                <a-button type="primary">
                    产品对比
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary" @click="exportReview">
                    评论数据导出
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    其他条件
                </a-button>
            </a-col>
            <a-col :span="6">
                <a-button type="primary">
                    查询
                </a-button>
            </a-col>
        </a-row>
        <!-- 内容显示区域（表格） -->
        <a-table :columns="columns" :data-source="data" class="white-pannel table-content" :pagination="pagination" rowKey="index">
           
            <!-- 产品品牌 -->
            <span slot="authorName"><a-icon type="smile-o" />评价者</span>
            <span slot="reviewStar"><a-icon type="smile-o" />评分</span>
            <span slot="reviewTime"><a-icon type="smile-o" />评论时间</span>
            <span slot="reviewStatus"><a-icon type="smile-o" />评论状态</span>
            <span slot="reviewTitle"><a-icon type="smile-o" />评论标题</span>
            <span slot="reviewTitleTranslation"><a-icon type="smile-o" />评论标题（翻译）</span>
            <span slot="reviewContent"><a-icon type="smile-o" />评论内容</span>
            <span slot="reviewTranslation"><a-icon type="smile-o" />评论内容</span>
            <span slot="action"><a-icon type="smile-o" />操作</span>

        <!-- 自定义渲染插槽 -->
            <!-- 自定义文本渲染 -->
            <span slot="customRenderText" slot-scope="text">
                {{text}}
            </span>
            <!-- 自定义标签渲染 -->
            <span slot="customRenderTag" slot-scope="text">
                <a-tag color="orange">
                    {{text}}
                </a-tag>
            </span>
            <!-- 操作 -->
            <span slot="action" slot-scope="reviewLink">
                 <a :href="reviewLink" target="_blank">查看原始评论页面</a>
            </span>
        </a-table>
    </div>
</template>
<script>
// import VolumeGraph from "@/components/echart/volume-graph.vue";
const columns = [
    // 评价者
    {
        dataIndex: 'authorName',
        // key: 'productImage',
        slots: {title: 'authorName'},
        scopedSlots: {customRender: 'customRenderText'},
        width: "80px"
    },
    // 评分
    {
        dataIndex: 'reviewStar',
        slots: { title: 'reviewStar' },
        scopedSlots: { customRender: 'customRenderTag' },
        width: "50px"
    },
    // 评价时间(后台提供的字符串格式)
    {
        dataIndex: 'reviewTimeStr',
        slots: { title: 'reviewTime' },
        scopedSlots: { customRender: 'customRenderText' },
    },
    // 评论状态
    {
        dataIndex: 'reviewStatus',
        slots: {title: 'reviewStatus'},
        scopedSlots: {customRender: 'customRenderTag'},
        width: "50px"
    },
    // 评论标题
    {
        dataIndex: 'reviewTitle',
        slots: {title: 'reviewTitle'},
        scopedSlots: {customRender: 'customRenderText'}
    },
    // 评论标题翻译
    {
        dataIndex: 'reviewTitleTranslation',
        slots: {title: 'reviewTitleTranslation'},
        scopedSlots: {customRender: 'customRenderText'}
    },
    // 评论内容
    {
        dataIndex: 'reviewContent',
        // key: 'productBsr',
        slots: {title: 'reviewContent'},
        scopedSlots: {customRender: 'customRenderText'},
    },

    // 评论内容(翻译)
    {
        dataIndex: 'reviewTranslation',
        // key: 'productBsr',
        slots: {title: 'reviewTranslation'},
        scopedSlots: {customRender: 'customRenderText'},
    },

     // 操作
    {
        dataIndex: 'reviewLink',
        title: '操作',
        scopedSlots: { customRender: 'action' },
    },
];


import {getItemReview} from "@/api/reviews/item_reviews"

export default {
    components: {  },
    data() {
        return {
            data:[],
            columns,
            pagination: {
                position: "bottom"
            }
        };
    },
    methods: {
        callback(key) {
            console.log(key);
        },
       
        exportReview(){
            console.log("评论数据导出")  
        },
    },
    created(){
        getItemReview({"asin": this.$route.params.asin}).then(
            (data)=>{
                this.data = data.data.data
            },
            (err) =>{
                console.log("request error", err)
            }
        )
    }
}
</script>
<style lang="less" scoped>
.container{
    margin: 30px 50px;
}

.card-panel{
    height: 200px;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
}

.white-pannel{
    background-color: white;
}

.condition-pannel{
    height: 50px;
    text-align: center;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.grid-image{
    width: 50px;
    height: 40px;
}

.tabel-content{
    margin-bottom: 50px;
    text-align: center;
}

.tab-panel{
    padding: 0 !important;
    margin: 0 !important;
}

.graph_cell{
    width: 200px;
    height: 80px;
}

.product-info{
    width: 150px;
}

.text-line{
    overflow: hidden;
    font-size: 10px;
}
</style>